<div class="page">
    <div class="queryForm">
        <div>
            <button nz-button nzType="defalut" (click)="showModal()">新建模型</button>
            <span class="ModelLength">您还可以新建{{ModelLength}}个模型</span>
        </div>
        <div>
            <nz-input-group [nzSuffix]="suffixIconSearch">
                <input type="text" nz-input placeholder="请输入模型名称" [(ngModel)]="seekModelValue" (ngModelChange)="seekModel()"/>
            </nz-input-group>
            <ng-template #suffixIconSearch>
                <i nz-icon nzType="search" (click)="seekModel()"></i>
            </ng-template>
        </div>
    </div>
    <div class="tables">
        <nz-table #rowSelectionTable nzShowPagination nzShowSizeChanger [nzData]="listOfData">
            <thead>
                <tr>
                    <th style="background-color: #F2F5FC;">模型名称</th>
                    <th  style="background-color: #F2F5FC;"[nzFilters]="[{ text: '实体识别', value: '实体识别' },{ text: '文本分类', value: '文本分类' }]" [nzFilterMultiple]="false"
                    [nzFilterFn]="fileFilterFn">任务类型</th>
                    <th style="background-color: #F2F5FC;">描述</th>
                    <th  style="background-color: #F2F5FC;"[nzSortFn]="timeCompare" [nzSortOrder]="'descend'" [nzSortDirections]="['descend','ascend']"
                    [nzSortPriority]="99">更新时间</th>
                    <th style="background-color: #F2F5FC;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of rowSelectionTable.data">
                    <td class="modelName">
                        <div class="edit_hover modelName" [hidden]="editNameId === data.model_id" (click)="EditName(data)">
                            {{ data.model_name }}<img src="assets/images/icon_edit_h.png" alt="" class="edit_img">
                        </div>
                        <div [hidden]="editNameId !== data.model_id" style="position: relative;">
                            <input type="text" nz-input (blur)="EditInputName(data.model_id)" [ngClass]="{'borderReds':EditModelName.length === 50}" [(ngModel)]="EditModelName" maxlength="50"/>  
                            <span *ngIf="EditModelName.length === 50" class="NameHint">最大字符长度为50</span>
                        </div>
                    </td>
                    <td>{{ data.task_type }}</td>
                    <td class="description">
                        <div class="edit_hover description">
                            {{ data.description }}
                        </div>
                        <!--  [hidden]="editId === data.model_id" (click)="EditDescribe(data)"  -->
                        <!-- <img src="assets/images/icon_edit_h.png" alt="" class="edit_img">  -->
                        <!-- <div [hidden]="editId !== data.model_id" style="position: relative;">
                            <input type="text" nz-input (blur)="EditInput(data.model_id)" [ngClass]="{'borderReds':Editdescribe.length === 200}" [(ngModel)]="Editdescribe" maxlength="200"/>  
                            <span *ngIf="Editdescribe.length === 200" class="NameHint">最大字符长度为200</span>
                        </div>-->
                        
                    </td>
                    
                    <td>{{ data.update_time }}</td>
                    <td><a [routerLink]="['/aicompetence/detail/model/modeledit']" [queryParams]="{model_name:data.model_name,task_type:data.task_type,description:data.description,model_id:data.model_id}">编辑</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                        <a (click)="deleteModel(data.model_id)">删除</a></td>
                </tr>
            </tbody>
        </nz-table>
    </div>
</div>

<nz-modal [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()" nzCentered="true" nzOkDanger="true">
    <div>
        <div class="new_model_title">新建模型</div>
        <div class="modal-form-item">
            <div class="title" style="line-height: 32px;">模型名称:</div>
            <div style="position: relative;">
                <input nz-input placeholder="模型名称" [(ngModel)]="addModelName" [ngClass]="{'borderReds':addModelName.length  === 50}" maxlength="50"/>
                <span *ngIf="addModelName.length === 50" class="NameHint">最大字符长度为50</span> 
            </div>
        </div>
        <div class="modal-form-item">
            <div class="title" style="line-height: 32px;">模型类型:</div>
            <div>
                <nz-select style="width: 350px;" ngModel="文本分类" nzAllowClear (ngModelChange)="province($event)">
                    <nz-option nzValue="文本分类" nzLabel="文本分类"></nz-option>
                    <nz-option nzValue="实体识别" nzLabel="实体识别"></nz-option>
                </nz-select>
            </div>
        </div>
        <div class="modal-form-item">
            <div class="title">描述:</div>
            <div class="modal_textarea_div">
                <textarea nz-input placeholder="描述" [nzAutosize]="{ minRows: 3, maxRows: 5 }" style="display: flex;flex: 1;" [(ngModel)]="addModelDescription"  maxlength="200"></textarea>
                <div style="display: flex;justify-content: flex-end;">{{addModelDescription.length}}/200</div>
            </div>
        </div>
    </div>
    <div *nzModalFooter>
        <button nz-button nzType="primary" style="background-color: #F66F6A;color: white;border: none;" nzDanger (click)="addModelList()">确定</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    </div>
</nz-modal>

<!-- 删除的模态框 -->
<nz-modal [(nzVisible)]="deleteShow" nzTitle="删除" [nzWidth]='400' [nzFooter]=null nzCentered (nzOnCancel)="deleteshut()">
    <ng-container *nzModalContent>
        <p>确定删除吗？</p>
        <div style="display: flex; justify-content: flex-end;">
            <button style="margin-right: 4px;" nz-button nzType="primary" nzDanger (click)="deleteOk()">确定</button>
            <button nz-button nzType="default" (click)="deleteshut()">取消</button>
        </div>
    </ng-container>
</nz-modal>